<template>
  <div class="edit-car-page">
    <div class="page-header">
      <h1>编辑车辆信息</h1>
      <div class="header-actions">
        <button @click="goBack" class="back-button">返回</button>
      </div>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    <form v-else @submit.prevent="saveCar" class="car-form">
      <div class="form-group">
        <label>品牌:<span class="required">*</span></label>
        <input v-model="carData.brand" required readonly />
      </div>
      <div class="form-group">
        <label>配置:<span class="required">*</span></label>
        <input v-model="carData.config" required/>
      </div>
      <div class="form-group">
        <label>指导价:<span class="required">*</span></label>
        <input v-model="carData.guidePrice" required />元
      </div>
      <div class="form-group">
        <label>近期优惠:</label>
        <input v-model="carData.recentDiscount" />
      </div>
      <div class="form-group">
        <label>裸车价格:<span class="required">*</span></label>
        <input v-model="carData.nakedCarPrice" required />元
      </div>
      <div class="form-group">
        <label>保险费用:<span class="required">*</span></label>
        <input v-model="carData.insuranceFee" required />元
      </div>
      <div class="form-group">
        <label>购置税:<span class="required">*</span></label>
        <input v-model="carData.purchaseTax" required />元
      </div>
      <div class="form-group">
        <label>上牌费用:<span class="required">*</span></label>
        <input v-model="carData.licenseFee" required />元
      </div>
      <div class="form-group">
        <label>全款落地:<span class="required">*</span></label>
        <input v-model="carData.fullPrice" required />元
      </div>
      <div class="form-group">
        <label>首付:</label>
        <input v-model="carData.downPayment" />元
      </div>
      <div class="form-group">
        <label>贷款金额:</label>
        <input v-model="carData.loanAmount" />元
      </div>
      <div class="form-group">
        <label>贷款年期:</label>
        <input v-model="carData.loanTerm" />年
      </div>
      <div class="form-group">
        <label>年利率:</label>
        <input v-model="carData.interestRate" />%
      </div>
      <div class="form-group">
        <label>每月还款额:</label>
        <input v-model="carData.monthlyPayment" />元
      </div>
      <div class="form-group">
        <label>总利息:</label>
        <input v-model="carData.totalInterest" />元
      </div>
      <div class="form-actions">
        <button type="submit" class="save-button">保存</button>
        <button type="button" @click="goBack" class="cancel-button">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import { getBrandByName, getConfigByBrandAndName, updateConfig } from '@/services/api';

export default {
  name: 'EditCarView',
  data() {
    return {
      carData: {
        brand: '',
        config: '',
        guidePrice: '',
        recentDiscount: '',
        nakedCarPrice: '',
        insuranceFee: '',
        purchaseTax: '',
        licenseFee: '',
        fullPrice: '',
        downPayment: '',
        loanAmount: '',
        loanTerm: '',
        interestRate: '',
        monthlyPayment: '',
        totalInterest: ''
      },
      loading: false
    };
  },
  async mounted() {
    await this.loadCar();
  },
  methods: {
    async loadCar() {
      this.loading = true;
      try {
        const brandName = this.$route.params.brandName;
        const configName = this.$route.params.configName;
        
        // 获取品牌信息
        const brandResponse = await getBrandByName(brandName);
        const brand = brandResponse.data;
        
        // 获取配置信息
        const configResponse = await getConfigByBrandAndName(brandName, configName);
        const config = configResponse.data;
        
        // 填充表单数据
        this.carData = {
          brand: brand.name,
          config: config.name,
          guidePrice: config.guidePrice,
          recentDiscount: config.recentDiscount,
          nakedCarPrice: config.nakedCarPrice,
          insuranceFee: config.insuranceFee,
          purchaseTax: config.purchaseTax,
          licenseFee: config.licenseFee,
          fullPrice: config.fullPrice,
          downPayment: config.downPayment,
          loanAmount: config.loanAmount,
          loanTerm: config.loanTerm,
          interestRate: config.interestRate,
          monthlyPayment: config.monthlyPayment,
          totalInterest: config.totalInterest
        };
      } catch (error) {
        console.error('加载车辆信息失败:', error);
      } finally {
        this.loading = false;
      }
    },
    async saveCar() {
      try {
        const configData = {
          name: this.carData.config,
          guidePrice: this.carData.guidePrice,
          recentDiscount: this.carData.recentDiscount,
          nakedCarPrice: this.carData.nakedCarPrice,
          insuranceFee: this.carData.insuranceFee,
          purchaseTax: this.carData.purchaseTax,
          licenseFee: this.carData.licenseFee,
          fullPrice: this.carData.fullPrice,
          downPayment: this.carData.downPayment,
          loanAmount: this.carData.loanAmount,
          loanTerm: this.carData.loanTerm,
          interestRate: this.carData.interestRate,
          monthlyPayment: this.carData.monthlyPayment,
          totalInterest: this.carData.totalInterest
        };
        
        await updateConfig(this.carData.brand, this.carData.config, configData);
        
        // 保存成功后返回管理页面
        this.$router.push('/manage');
      } catch (error) {
        console.error('保存车辆信息失败:', error);
        alert('保存失败，请重试');
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.edit-car-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
}

.back-button {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.back-button:hover {
  background-color: #5a6268;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.car-form {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 30px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-group label {
  width: 120px;
  font-weight: bold;
  color: #2c3e50;
  text-align: right;
  margin-right: 15px;
}

.form-group input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input[readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.required {
  color: red;
  margin-left: 4px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.save-button, .cancel-button {
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.save-button {
  background-color: #42b983;
  color: white;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.save-button:hover {
  background-color: #359c6d;
}

.cancel-button:hover {
  background-color: #5a6268;
}
</style>